{extend name="base" /}
{block name="title"}
<title>首页-{$site_config.site_title}</title>
{/block}
{block name="body"}
	<style type="text/css">
		.none{display:none;}
		#h-submit{width:100%;float:left;padding:3% 0;font-size:18px;text-align: center;color:#c3c3c3;}
	</style>
	<header class="page-header1">
		<a href="javascript:history.go(-1);"><img src="__STATIC__/img/back02.png" class="back_img" style="float:left;"/></a>
		<h3>添加银行卡</h3>
	</header>
	<form id="h-form">
		<div class="add_card">
			<div class="add_card_center">
				<div class="prompt">该交易仅支持储蓄卡</div>
				<div class="cardholder"  style="border-bottom:1px solid #d2d2d2;">
					<div class="cardholder_name">持卡人</div>
					<div class="cardholder_write">
						<input type="text" placeholder="姓名" maxlength="20" data-error="用户名不能为空||只能输入中文" class="cardholder_inp" id="username" name="true_name" />
					</div>
				</div>
				
				<div class="cardholder">
					<div class="cardholder_name">卡号</div>
					<div class="cardholder_write">
						<input type="text" placeholder="无需网银/免手续费" class="cardholder_inp" id="card_number" name="card_id" />
					</div>
				</div>
			</div>
			<div class="prepaid_card_confirm_input btu_next">
				<div id="btu">下一步</div>
			</div>
			
			<div style="clear:both;"></div>
		</div>
			
		<div class="add_card1 none">
			<div class="add_card_center">
				<div class="prompt"></div>
				<div class="cardholder" style="border-bottom:1px solid #d2d2d2;">
					<div class="cardholder_name">卡类型</div>
					<div class="cardholder_write" id="card_type">
						<select  name="bank_name" >
			              <option value="">请选择</option>
			              <option value="国家开发银行">国家开发银行</option>
			              <option value="中国进出口银行">中国进出口银行</option>
			              <option value="中国农业发展银行">中国农业发展银行</option>
			              <option value="中国银行">中国银行</option>
			              <option value="中国工商银行">中国工商银行</option>
			              <option value="中国建设银行">中国建设银行</option>
			              <option value="中国农业银行">中国农业银行</option>
			              <option value="中国光大银行">中国光大银行</option>
			              <option value="中国民生银行">中国民生银行</option>
			              <option value="中信银行">中信银行</option>
			              <option value="交通银行">交通银行</option>
			              <option value="华夏银行">华夏银行</option>
			              <option value="招商银行">招商银行</option>
			              <option value="兴业银行">兴业银行</option>
			              <option value="广发银行">广发银行</option>
			              <option value="平安银行">平安银行</option>
			              <option value="上海浦东发展银行">上海浦东发展银行</option>
			              <option value="恒丰银行">恒丰银行</option>
			              <option value="浙商银行">浙商银行</option>
			              <option value="渤海银行">渤海银行</option>
			              <option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
			              <option value="城市商业银行">城市商业银行</option>
			              <option value="北京银行">北京银行</option>
			              <option value="天津银行">天津银行</option>
			              <option value="河北银行">河北银行</option>
			              <option value="沧州银行">沧州银行</option>
			              <option value="唐山市商业银行">唐山市商业银行</option>
			              <option value="承德银行">承德银行</option>
			              <option value="张家口市商业银行">张家口市商业银行</option>
			              <option value="秦皇岛银行">秦皇岛银行</option>
			              <option value="邢台银行">邢台银行</option>
			              <option value="廊坊银行">廊坊银行</option>
			              <option value="保定银行">保定银行</option>
			              <option value="邯郸银行">邯郸银行</option>
			              <option value="衡水银行">衡水银行</option>
			              <option value="晋商银行">晋商银行</option>
			              <option value="大同市商业银行">大同市商业银行</option>
			              <option value="长治银行">长治银行</option>
			              <option value="其他</">其他</option>
			          </select>
					</div>
				</div>
				
				<div class="cardholder">
					<div class="cardholder_name">手机号</div>
					<div class="cardholder_write">
						<input type="text" placeholder="手机号" class="cardholder_inp" id="card_phone" name="mobile" />
					</div>
				</div>
			</div>
			<!-- <a href="{:url('home/user/top_up')}"><div class="prepaid_card_confirm_input ">
				<div id="btu_t">绑定</div>
			</div></a> -->
			<!-- <div id="btu_t">绑定</div> -->
			<!-- <button type="button" class="b_login" id="h-submit">登录</button> -->
			<button type="button"  id="h-submit" style="border: 0;">绑定</button>
			<div style="clear:both;"></div>
		</div>
	</form>
	<script type="text/javascript">
		$('.btu_next').click(function(){
			$('.add_card1').removeClass('none');
			$('.add_card').addClass('none');
		});
	</script>
	
    <script type="text/javascript">
    window.onload =function()
    {
        document.getElementById("btu").style.backgroundImage ="url(__STATIC__/img/confirm_01.png)";
        document.getElementById("btu").style.backgroundSize ="100% 100%";
        document.getElementById("h-submit").style.backgroundImage ="url(__STATIC__/img/confirm_01.png)";
        document.getElementById("h-submit").style.backgroundSize ="100% 100%";
         
        //鼠标悬停在按钮上时判断。
        document.getElementById("card_number").onkeyup = function()
        {
            if(document.getElementById("username").value==""|document.getElementById("card_number").value=="")
            {
                document.getElementById("btu").style.backgroundImage ="url(__STATIC__/img/confirm_01.png)";
                document.getElementById("btu").style.backgroundSize ="100% 100%";
                document.getElementById("btu").innerHTML="下一步";
            }else
            {
                document.getElementById("btu").style.backgroundImage ="url(__STATIC__/img/confirm_02.png)";
                document.getElementById("btu").style.backgroundSize ="100% 100%";
                document.getElementById("btu").style.color ="#fff";
                document.getElementById("btu").innerHTML="下一步";
            }
        }
        //鼠标悬停在按钮上时判断。
        document.getElementById("card_phone").onkeyup = function()
        {
            if(document.getElementById("card_type").value==""|document.getElementById("card_phone").value=="")
            {
                document.getElementById("h-submit").style.backgroundImage ="url(__STATIC__/img/confirm_01.png)";
                document.getElementById("h-submit").style.backgroundSize ="100% 100%";
                document.getElementById("h-submit").innerHTML="绑定";
            }else
            {
                document.getElementById("h-submit").style.backgroundImage ="url(__STATIC__/img/confirm_02.png)";
                document.getElementById("h-submit").style.backgroundSize ="100% 100%";
                document.getElementById("h-submit").style.color ="#fff";
                document.getElementById("h-submit").innerHTML="绑定";
            }
        }
    }
    </script>
    {include file="public/submit" /}
{/block}

